import { Space, Table, Tag, Button, Form, Input, Select, Modal } from "antd";
import FormItem from "antd/es/form/FormItem";
const { Option } = Select;
import {
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
  useCallback,
} from "react";
//表格模拟的数据
//列数据
let deleteItem = null;
let edit = null;
const test1 = () => {
  const inputRef = useRef(null);
  //输入框的值
  const [inputValue, setInputValue] = useState(123);
  //表单是否显示
  let [isshow, setIsshow] = useState(false);
  useEffect(() => {
    // useEffect 会在第一次渲染以及每次更新渲染后都执行。(第二个参数不传)
    inputRef.current && inputRef.current.focus();
    // }
  });
  const measureRef = useCallback((node) => {
    // setTimeout(() => {
    // }, 500);
    // node.foucs();
  });
  // useEffect(() => {
  //   console.log("11");
  //   // if (value === "input") {
  //   //   inputRef.current.focus();
  //   // }
  // }, [isshow]);
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];
  //表格响应式数据
  let [data1, setData] = useState(data);
  //表单实例对象
  const [form] = Form.useForm();
  //分页的数据
  const [pagenationObj, setPagenationObj] = useState({
    total: data1.length,
    pageSize: 1,
    current: 1,
  });
  //form表单标题文字
  const [title, setTitle] = useState("编辑表单");
  //显示span还是input
  const [inputOrSpan, setInputOrSpan] = useState("span");
  //分页参数
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumpe: true,
    pageSizeOptions: [1, 2, 3],
    showTotal: () => `共${pagenationObj.total}条`,
    pageSize: pagenationObj.pageSize,
    current: pagenationObj.current,
    total: pagenationObj.total,
    // 去哪一页
    onChange: (current, pageSize) => changePage(current, pageSize),
  };
  //分页的配置
  const //表格删除按钮回调
    deleteItem = (key) => {
      const index = data.findIndex((v) => {
        return v.key === key;
      });
      //splice返回值是被删除的元素
      data.splice(index, 1);
      data1 = [...data];
      setData(data1);
    };
  //编辑
  edit = (row) => {
    //回显数据
    form.setFieldsValue({
      name: row.name,
      age: row.age,
      address: row.address,
    });
    setIsshow(true);
  };
  //表单提交的回调
  const onFinish = (values) => {
    console.log(values);
  };
  //关闭对话框
  const handleOk = () => {
    setIsshow(false);
    //清空表单
    onReset();
  };
  //清空表单
  const onReset = () => {
    form.resetFields();
    //关闭表单的时候回复初始值
    setTitle("编辑表单");
  };
  //新增表单
  const addFrom = () => {
    setIsshow(true);
    setTitle("新增表单");
  };
  //去第几页
  const changePage = (current, pageSize) => {
    setPagenationObj({
      current,
      pageSize,
      total: data1.length,
    });
  };
  //去变成输入框
  const toInput = ({ age }) => {
    // setInputOrSpan("input");
    // console.log(inputRef.current.focus());
    setInputOrSpan((v) => {
      return "input";
    });
    setInputValue(age);
  };
  //监听输入框值的改变
  const changeValue = (e) => {
    console.log("111");
    setInputValue(e.target.value);
  };
  //失焦事件
  const handleBlur = () => {
    setInputOrSpan("span");
  };
  //获得焦点
  const handleFocus = () => {};
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
      // 第二个参数是当前行的数据
      render: (value1, v2) => {
        return (
          <>
            <div>
              {inputOrSpan === "span" ? (
                <span onClick={() => toInput(v2)}>{value1}</span>
              ) : (
                <Input
                  ref={inputRef}
                  onChange={changeValue}
                  onBlur={handleBlur}
                  onFocus={handleFocus}
                  value={inputValue}
                  placeholder="Basic usage"
                />
              )}
            </div>
          </>
        );
      },
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => edit(record)}>编辑</a>
          {/* 函数待参数必须这样写，不然就是直接调用了 */}
          <a onClick={() => deleteItem(record.key)}>Delete</a>
        </Space>
      ),
    },
  ];
  return (
    <>
      <div>
        <Button onClick={addFrom} type="primary">
          新增表单
        </Button>
        <Table
          columns={columns}
          dataSource={data1}
          pagination={paginationProps}
        />
        {/* 编辑和修改页面 */}
        {/* form表单 */}
        <div>
          {isshow ? (
            <div>
              <Modal
                title={title}
                open={isshow}
                onOk={handleOk}
                onCancel={handleOk}
              >
                <Form
                  form={form}
                  style={{
                    maxWidth: 600,
                  }}
                  onFinish={onFinish}
                >
                  <Form.Item
                    name="name"
                    label="名字"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name="age"
                    label="年龄"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    name="address"
                    label="地址"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      Submit
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                      Reset
                    </Button>
                  </Form.Item>
                </Form>
              </Modal>
            </div>
          ) : null}
        </div>
      </div>
    </>
  );
};
export default test1;
